import { nextTick } from 'vue'
export default {
  mounted(el: any, binding: any) {
    // 等待组件渲染完毕
    nextTick(() => {
      console.log('mounted')
      handleDrag(el, binding)
    })
  },
  updated(el: any, binding: any, vnode: any, oldVnode: any) {
    console.log('update')
    handleDrag(el, binding, vnode, oldVnode)
  }
}

const handleDrag = (el: any, binding: any, vnode?: any, oldVnode?: any) => {
  // 将弹框传送到body下
  document.querySelector('body')?.appendChild(el)
  const svgFullScreen =
    '<i class="el-icon" style="font-size:16px;" onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64z"></path></svg></i>'
  const svgCrop =
    '<i class="el-icon" style="font-size:16px;" onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M256 768h672a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V96a32 32 0 0 1 64 0z"></path><path fill="currentColor" d="M832 224v704a32 32 0 1 1-64 0V256H96a32 32 0 0 1 0-64h704a32 32 0 0 1 32 32"></path></svg></i>'
  // 弹框可拉伸最小宽高
  const minWidth = 820
  // eslint-disable-next-line no-unused-vars
  const minHeight = 460
  // 初始非全屏
  let isFullScreen = false
  // 当前宽高
  let nowWidth = 0
  // eslint-disable-next-line no-unused-vars
  let nowHeight = 0
  // 当前顶部高度
  let nowMarginTop = 0
  // 获取弹框头部（这部分可双击全屏）
  const dialogHeaderEl = el.querySelector('.el-dialog__header')
  // 弹窗
  const dragDom = el.querySelector('.el-dialog')
  const dragDomBody = el.querySelector('.el-dialog__body')
  // 如果还未渲染，则返回
  if (!dialogHeaderEl || !dragDom) {
    // console.log('未加载指令el-drag-dialog')
    return
  }
  if (dialogHeaderEl.onmousedown) {
    // console.log('已设置自定义指令')
    return
  }
  // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
  dragDom.style.overflow = 'auto'
  // 清除选择头部文字效果
  // dialogHeaderEl.onselectstart = new Function("return false");
  // 头部加上可拖动cursor
  dialogHeaderEl.style.cursor = 'move'
  // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
  const moveDown = (e: any) => {
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - dialogHeaderEl.offsetLeft
    const disY = e.clientY - dialogHeaderEl.offsetTop
    // 获取到的值带px 正则匹配替换
    let styL: any, styT: any
    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
    if (sty.left.includes('%')) {
      styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
      styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
    } else {
      styL = +sty.left.replace(/px/g, '')
      styT = +sty.top.replace(/px/g, '')
    }
    document.onmousemove = function (e) {
      // 通过事件委托，计算移动的距离
      const l = e.clientX - disX
      const t = e.clientY - disY
      // 移动当前元素
      dragDom.style.left = `${l + styL}px`
      dragDom.style.top = `${t + styT}px`
      // 将此时的位置传出去
      // binding.value({ x: e.pageX, y: e.pageY })
    }
    document.onmouseup = function (e) {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
  dialogHeaderEl.onmousedown = moveDown

  // 最大最小化
  const setMaxMin = (e: any) => {
    if (isFullScreen === false) {
      // const i = maxMin.querySelector('.el-icon-full-screen')
      // ;(i as Element).classList.remove('el-icon-full-screen')
      // ;(i as Element).classList.add('el-icon-crop')
      maxMin.innerHTML = svgCrop
      maxMin.title = '还原'

      nowHeight = dragDom.clientHeight
      nowWidth = dragDom.clientWidth
      nowMarginTop = dragDom.style.marginTop
      dragDom.style.left = 0
      dragDom.style.top = 0
      dragDom.style.height = '100VH'
      dragDom.style.width = '100VW'
      dragDom.style.marginTop = 0
      // dragDom.style.marginTop = '0px !important;'
      dragDom.classList.add('is-fullscreen')
      dragDomBody.style.height = 'calc(100% - 105px)'
      isFullScreen = true
      dialogHeaderEl.style.cursor = 'initial'
      dialogHeaderEl.onmousedown = null
    } else {
      // const i = maxMin.querySelector('.el-icon-crop')
      // ;(i as Element).classList.remove('el-icon-crop')
      // ;(i as Element).classList.add('el-icon-full-screen')
      // maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'
      maxMin.innerHTML = svgFullScreen
      maxMin.title = '最大化'

      dragDom.style.height = 'auto'
      dragDom.style.width = nowWidth + 'px'
      dragDom.style.marginTop = nowMarginTop
      // dragDom.style.top = 0
      // dragDom.style.marginTop = '6vh !important;'
      dragDom.classList.remove('is-fullscreen')
      isFullScreen = false
      dialogHeaderEl.style.cursor = 'move'
      dialogHeaderEl.onmousedown = moveDown
    }
  }

  //头部插入最大化最小化元素
  const maxMin = document.createElement('button')
  maxMin.className += ' el-dialog__headerbtn el-dialog__minmax'
  maxMin.style.right = '40px'
  maxMin.style.color = '#909399'
  maxMin.title = el.fullscreen ? '还原' : '最大化'
  maxMin.id = 'MinMax'
  maxMin.innerHTML = el.fullscreen ? svgCrop : svgFullScreen

  if (dialogHeaderEl) {
    // 插入前判断是否已经存在按钮
    const minMaxEl = dialogHeaderEl.querySelector('#MinMax')
    if (minMaxEl) {
      return
    }
    
    dialogHeaderEl.insertBefore(
      maxMin,
      dialogHeaderEl.childNodes[dialogHeaderEl.childNodes.length - 1]
    )
  }

  //点击放大缩小效果
  maxMin.onclick = setMaxMin
  // 双击头部全屏效果
  dialogHeaderEl.ondblclick = setMaxMin

  // setMaxMin(undefined)
  dragDom.onmousemove = function (e: any) {
    // eslint-disable-next-line no-unused-vars
    const moveE = e
    if (
      e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 ||
      dragDom.offsetLeft + 10 > e.clientX
    ) {
      dragDom.style.cursor = 'w-resize'
      // eslint-disable-next-line brace-style
    } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) {
      dragDom.style.cursor = 's-resize'
    } else {
      dragDom.style.cursor = 'default'
      dragDom.onmousedown = null
    }
    dragDom.onmousedown = (e: any) => {
      const clientX = e.clientX
      const clientY = e.clientY
      const elW = dragDom.clientWidth
      // eslint-disable-next-line no-unused-vars
      const elH = dragDom.clientHeight
      const EloffsetLeft = dragDom.offsetLeft
      const EloffsetTop = dragDom.offsetTop
      // dragDom.style.userSelect = 'none' // 禁止用户选择文本样式
      // eslint-disable-next-line no-unused-vars
      const ELscrollTop = el.scrollTop
      // 判断点击的位置是不是为头部
      if (
        clientX > EloffsetLeft &&
        clientX < EloffsetLeft + elW &&
        clientY > EloffsetTop &&
        clientY < EloffsetTop + 100
      ) {
        // 如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;
      } else {
        document.onmousemove = function (e) {
          // e.preventDefault() // 移动时禁用默认事件
          // 左侧鼠标拖拽位置
          if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
            // 往左拖拽
            if (clientX > e.clientX) {
              dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'
            }
            // 往右拖拽
            if (clientX < e.clientX) {
              if (dragDom.clientWidth < minWidth) {
              } else {
                dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'
              }
            }
          }
          // 右侧鼠标拖拽位置
          if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
            // 往左拖拽
            if (clientX > e.clientX) {
              if (dragDom.clientWidth < minWidth) {
              } else {
                dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'
              }
            }
            // 往右拖拽
            if (clientX < e.clientX) {
              dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'
            }
          }
          // 底部鼠标拖拽位置
          if (
            ELscrollTop + clientY > EloffsetTop + elH - 20 &&
            ELscrollTop + clientY < EloffsetTop + elH
          ) {
            // 往上拖拽
            if (clientY > e.clientY) {
              if (dragDom.clientHeight < minHeight) {
              } else {
                dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'
              }
            }
            // 往下拖拽
            if (clientY < e.clientY) {
              dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'
            }
          }
        }
        // 拉伸结束
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
}
